<template>
  <div class="about">
    <h3>访问state中数据</h3>
    <div>
      {{ $store.state.student.students }}
    </div>
    <div>
      {{ mystudent }}
    </div>
    <div>
      {{ snumb }}
    </div>
    <div>访问getters: {{ fmtNumb }}</div>
    <div>getters: {{ $store.getters.fmtNumA }}</div>
    <button @click="fn1">添加1</button>
    <button @click="fn2">添加2</button>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapState,mapActions } from "vuex";
export default {
  computed: {
    ...mapState({
      // 组件内方法名：state =>state.模块名.属性 
      mystudent: (state) => state.student.students,
      snumb: (state) => state.student.snumb,
    }),
    ...mapGetters({
      // 组件内方法名："模块名称/属性"
      fmtNumb: "student/fmtNumb",
    }),
  },
  methods: {
    ...mapMutations({
      // 组件内方法名："模块名称/方法名"
      addStu: "student/addStu",
    }),
    ...mapActions({
      // 组件内方法名："模块名称/方法名"
      asynAddStu: "student/asyncAddStu",
    }),
    fn1() {
      this.addStu({ stuname: "xiao", age:20 });
    },
    fn2() {
      this.asynAddStu({ stuname: "xiao2333",age: 20 })
    }
  }
}
</script>